<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="barMain" style="height:400px"></div>
<div id="lineMain" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
　　paths: {
　　　　echarts: 'http://echarts.baidu.com/build/dist'
　　}
});
// 使用
require(
　　　　　　[
　　　　　　　　'echarts',
　　　　　　　　'echarts/chart/bar',
　　　　　　　　'echarts/chart/line'
　　　　　　],
　　　　　　drawEcharts
);
 
function drawEcharts(ec){
　　drawBar(ec);
　　drawLine(ec);
}
function drawBar(ec){
　　var myBarChart = ec.init(document.getElementById('barMain'));
　　var option = {
　　　　tooltip: {
　　　　show: true
　　},
　　legend: {
　　　　data:['销量']
　　},
　　xAxis : [
　　　　{
　　　　　　type : 'category',
　　　　　　data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value'
　　　　}
　　],
　　series : [
　　　　{
　　　　　　"name":"销量",
　　　　　　"type":"bar",
　　　　　　"data":[5, 20, 40, 10, 10, 20]
　　　　}
　　]
};
myBarChart.setOption(option,true); //当setOption第二个参数为true时，会阻止数据合并
}
 
 
function drawLine(ec){
　　var myLineChart = ec.init(document.getElementById('lineMain'));
　　var option2 = {
　　　　title : {
　　　　text: '未来一周气温变化',
　　　　subtext: '纯属虚构'
　　},
　　tooltip : {
　　　　trigger: 'axis'
　　},
　　legend: {
　　　　data:['最高气温','最低气温']
　　},
　　toolbox: {
　　　　show : true,
　　　　feature : {
　　　　　　mark : {show: true},
　　　　　　dataView : {show: true, readOnly: false},
　　　　　　magicType : {show: true, type: ['line', 'bar']},
　　　　　　restore : {show: true},
　　　　　　saveAsImage : {show: true}
　　　　}
　　},
　　calculable : true,
　　xAxis : [
　　　　{
　　　　　　type : 'category',
　　　　　　boundaryGap : false,
　　　　　　data : ['周一','周二','周三','周四','周五','周六','周日']
　　　　}
　　],
　　yAxis : [
　　　　{
　　　　　　type : 'value',
　　　　　　axisLabel : {
　　　　　　　　formatter: '{value} °C'
　　　　　　}
　　　　}
　　],
　　series : [
　　　　{
　　　　　　name:'最高气温',
　　　　　　type:'line',
　　　　　　data:[11, 11, 15, 13, 12, 13, 10],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'max', name: '最大值'},
　　　　　　　　　　{type : 'min', name: '最小值'}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name: '平均值'}
　　　　　　　　]
　　　　　　}
　　　　},
　　　　{
　　　　　　name:'最低气温',
　　　　　　type:'line',
　　　　　　data:[1, -2, 2, 5, 3, 2, 0],
　　　　　　markPoint : {
　　　　　　　　data : [
　　　　　　　　　　{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
　　　　　　　　]
　　　　　　},
　　　　　　markLine : {
　　　　　　　　data : [
　　　　　　　　　　{type : 'average', name : '平均值'}
　　　　　　　　]
　　　　　　}
　　　　}
　　]
};
myLineChart.setOption(option2,true);
}
</script>
</body>